<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{:session('cp.cpsysname')}--商户管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="{:config('webconfig.description');}">
    <meta name="keywords" content="{:config('webconfig.keywords');}">
    <meta name="author" content="runoob">
    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/index.css"/>

    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/core.css?v=5"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/setyxhd.css?v=5"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/fonts/css/font-awesome.css?v=3"/>

    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/setpaymentput.css"/>

    <script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
    <script src="__STATIC_URL__/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="__STATIC_URL__/static/js/commen.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC_URL__/static/layer/layer.js"></script>


</head>
<body>
{include file='public/header'/}
<!------------------导航-------------------------->
<section>
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">

        <div class="panel ">
            <div class="panel-body">
                <!--路径导航-->
                <ol class="breadcrumb">
                    <li>当前位置是&nbsp;:</li>
                    <li><a href="javascript:history.back();">营销工具</a></li>
                    <li><a href="javascript:history.back(-1)">活动营销</a></li>

                    <li class="active" style="color: #02b87f;">支付后送券</li>
                </ol>
                <div>
                    <div>
                        <div class="panel panel-default ng-scope">
                            <div class="panel-heading">
                                支付后送券规则列表
                            </div>
                            <div class="panel-body">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <!--<td>编号</td>-->
                                        <td>赠送卡券</td>
                                        <td>开始时间</td>
                                        <td>结束时间</td>
                                        <td>最小金额</td>
                                        <td>最大金额</td>
                                        <td>状态</td>
                                        <td>创建时间</td>

                                    </tr>
                                    </thead>
                                    <tbody>
                                    {volist name="list" id="vo"}
                                    <tr ng-if="!instances.list.length" class="ng-scope">
                                        <td>{$vo['zs_card_info']}</td>
                                        <td>{$vo['start_time']|date="Y-m-d h:i",###}</td>
                                        <td>{$vo['end_time']|date="Y-m-d h:i",###}</td>
                                        <td>{$vo['min_fee']}元</td>
                                        <td>{$vo['max_fee']}元</td>

                                        <td>
                                            {if
                                            condition="$vo['statu']=='0' "}
                                            <a class="btn-link" href="javascript:;" data-id="{$vo['id']}" onclick="status(this);" style="color:#FF3030">下架</a>
                                            {else/}
                                            <a class="btn-link" href="javascript:;" data-id="{$vo['id']}" onclick="status(this);">上架</a>
                                            {/if}
                                           </td>
                                        <td>{$vo['create_time']}</td>

                                    </tr>
                                    {/volist}
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="panel panel-default ng-scope c_content">

                            <form action="" method="post"  id="creatcards">
                                <div class="headings gengduoxian">
                                    <i class="infoLine"></i>新增支付后送券规则 <span class="note-inf">带<a style="color:red;"> * </a>为必填项</span>
                                </div>

                                <div class="panel-body">
                                    <div class="col-sm-12">
                                    <div class="form-horizontal" data-label="开始时间"
                                         data-layout="horizontal">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label"><span class="red-xing-rs"></span>开始时间</label>
                                            <div class="col-sm-10">
                                                <div class=" w60">
                                                    <input type="text" name="times" class="form-control data_ipt" value="" placeholder="请选择开始时间-结束时间" disabled id="starttime">

                                                </div>
                                                <div class="checkbox checkbox-primary permanent"
                                                     style="left: 41px;top: 4px;display: inline-block;">
                                                    <input type="hidden" name="time_type"  value="lasting" id="lasting">
                                                    <input id="permanent_ck" type="checkbox"
                                                           class="autoDelayFlag" checked  >
                                                    <label for="permanent_ck">永久有效</label>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    </div>



                                    <div class="col-sm-12">
                                        <div class="form-horizontal" data-label="选择卡券">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label"><span class="red-xing-rs"></span>选择卡券</label>
                                                <div class="col-xs-10 col-sm-10 col-md-10 form1" >

                                                    <div class="gift-record" id="sel1">
                                                        <select name="cardlist[zs_card_id][]"  class="form-control" id="opt">
                                                            <option value="">--请选择--</option>
                                                        </select>

                                                        <input type="number" class="form-control" min="1" placeholder="请填写" value="1" name="cardlist[zs_no][]" data="num" id="num">
                                                    </div>
                                                    <a href="javascript:;"  data-counts="1" id="datacount" style="color: #2db7f5;">添加赠送</a>
                                                </div>

                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-sm-12">
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label"><span class="red-xing-rs"></span>最小金额</label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control" autocomplete="off"
                                                           placeholder="" name="min_fee"  id="min_fee">
                                                    <div class="r-message text-danger"></div>
                                                    <div class="r-desc ">
                                                        本次规则生效支付金额下限，开启时须填写。（单位：元）
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-sm-12">
                                        <div class="form-horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label ng-binding"><span class="red-xing-rs"></span>最大金额</label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control" autocomplete="off"
                                                           placeholder="" name="max_fee"  id="max_fee">
                                                    <div class="r-message text-danger"></div>
                                                    <div class="r-desc">
                                                        本次规则生效支付金额上限，开启时须填写。（单位：元）
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>




                                </div>
                                <div class="alert alert-danger"
                                     style="margin:0;">最小金额不能为空, 只可存在3条支付后赠券规则。
                                </div>

                        </div>
                        <div class="panel-footer">
                            {if condition="($info['num'] == 3) OR ($info['num'] > 3) "}
                            <button class="btn btn-default" type="button">已有3条上架规则</button>
                            {else/}

                            <button class="btn btn-success" type="button" onclick="check();">保存</button>
                            {/if}
                        </div>
                        </form>



                    </div>


                </div>
            </div>
        </div>
    </div>
    {include file='public/footer'/}
    </div>
</section>
<script src="__STATIC_URL__/static/laydate/laydate.js"></script>
<script src="__STATIC_URL__/static/js/setyxhd.js?v=2"></script>

<script>
    function status(obj) {
        var id = $(obj).attr("data-id");
        console.log(id);
        $.ajax({
            url: "{:url('marke/paymentputcardsstatu')}",
            type: "post",
            data: {
                id: id
            },
            success: function (data) {
                console.log(11, data);
                if(data.code=="0"){
                    window.location.reload();
                }else{
                    layer.alert(data.message);
                }


            }
        })

    }
</script>
<script>


    laydate.render({
        elem: '#starttime',
        type: 'datetime',
        range:'-',

        change: function(value, date,endDate){ //监听日期被切换


        }
    });


</script>
<script>
    $(function(){
        $.ajax({
            url: "{:url('cards/getcardlist')}",
            type:"post",
            data: {
            },
            success: function (data) {

                var text =data.data;
                //console.log(text);
                var option2="";
                for(var i=0; i<text.length; i++){
                    // console.log(text[i].card_id);

                    option2 +='<option value="'+text[i].card_id+'" data-title="'+text[i].title+' "data-limit="'+text[i].get_limit+'">'+text[i].title+'  ( 最大可选卡券数量为'+text[i].get_limit+' )</option>\n'

                }
                $('#sel1').find("select").append(option2);
                $("#opt").change(function(){

                    limit=parseInt($("#sel1").find("option:selected").attr("data-limit"));
                    var nu=parseInt($("#num").val());

                    $("#num").attr("max",limit);





                });

                $("#datacount").click(function(){


                    datacount=$(this).attr('data-counts');
                    get_limit=parseInt($("#sel"+datacount).find("option:selected").attr("data-limit"));
                    num=parseInt($("#sel"+datacount).find("input").val());
                    val=$("#sel"+datacount).find("option:selected").val();
                    if( $("#sel"+datacount).find("option:selected").val()==""){
                        alert("卡券选项不能为空");
                        return;
                    }
                    else if(num>get_limit){
                        console.log(num,get_limit);
                        console.log(num>get_limit);
                        alert("你选择的卡券数量超过了该卡券的领取数量!");
                        return;
                    }
                    else{

                        datacount2=parseInt(datacount)+1;
                        $(this).attr('data-counts',datacount2);
                        var html1 ='                        <div class="col-xs-12 col-sm-12 col-md-12 addcord" >\n' +
                            '                            <div class="gift-record"id="sel'+datacount2+'">\n' +
                            '                                <select name="cardlist[zs_card_id][]"  class="form-control" >\n' +
                            '                                    <option value="" selected="selected">--请选择--</option>\n' ;

                        var html3= '                                </select>\n' +
                            '                                <input type="number" class="form-control" min="1" placeholder="请填写" value="1" name="cardlist[zs_no][]">\n' +
                            '                            </div>\n' +
                            '                             <a href="javascript:;" onclick="delsel(this)">删除</a>\n' +
                            '                    </div>';

                        $('.form1').append(html1+option2+html3);

                        $("#sel"+datacount2).find("select").change(function(){

                            limit=$("#sel"+datacount2).find("option:selected").attr("data-limit");
                            $("#sel"+datacount2).find("input").attr("max",limit);



                        });

                    }




                })
            }
        })


    })
</script>
<script>
    function check(){
        var max_fee=$("#max_fee").val();
        var starttime=$("#starttime").val();
        var min_fee=$("#min_fee").val();
        var opt=$("#opt").val();
        var items = document.getElementsByTagName('select'),
            len = items.length,
            i = 0,
            valMap = {},
            sel,
            val;

        // 遍历并保存各个下拉列表的值于valMap
        for(; i < len; i++){
            sel = items[i];
            val = sel.options[sel.selectedIndex].value;

            // 没有相同的取值时保存该值，否则返回false
            if(!valMap[val]){
                valMap[val] = 1;
            }else{
                layer.alert('请删除重复的卡券！');
                return false;
            }

        }
        if ($('#permanent_ck').prop("checked")==false) {
            if(starttime==""){
                alert('请选择时间！');
                return false;
            }
        }
        if(opt==""){
            layer.alert('请选择卡券！');
            return false;
        }
        if(min_fee==""){
            layer.alert('请输入最小金额！');
            return false;
        }
        if(max_fee==""){
            layer.alert('请输入最大金额！');
            return false;
        }

        if(Number(min_fee)<0.01){
            layer.alert('最小金额不能小于0.01！');
            return false;
        }

        // 校验通过，全部都不相同
        $.ajax({
            url: "{:url('')}",
            type: "post",
            data: $("#creatcards").serialize(),
            success: function (data) {
                console.log(data);
                if(data.code==0){
                    layer.msg(data.message);
                    setTimeout(function(){
                        window.location.reload();

                    },1500)
                }else{
                    layer.msg(data.message);
                }
            }
        })
    }

</script>
</body>

</html>
